﻿<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<jsp:useBean id="dateValue" class="java.util.Date"/>

<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>
<!DOCTYPE html>
<html lang="en">
<head>
    <base href="<%=basePath%>">
    <!-- jsp文件头和头部 -->
    <%@ include file="../admin/top.jsp" %>

    <style>
        table tr td img {
            height: 25px;
            border-radius: 8%;
        }

    </style>
</head>
<body>
<div class="container-fluid" id="main-container">

    <div id="page-content" class="clearfix">
        <div class="row-fluid">
            <div class="row-fluid">
                <!-- 检索  -->
                <form action="position/list" method="post" name="userForm" id="userForm">
                    <input type="hidden" name="menuId" value="${page.menuId}">
                    <table style="width: 310px">
                        <tr>
                            <td>
                                <span class="input-icon">
                                    <input style="margin-top: 0px;" autocomplete="off" id="nav-search-input" type="text"
                                           name="searchValue" value="${page.searchValue}" placeholder="设备imei号"/>
                                </span>
                            </td>
<%--                            <td>--%>
<%--                                <span class="input-icon">--%>
<%--                                    <input style="margin-top: 0px;" autocomplete="off" id="searchLocTime" type="date"--%>
<%--                                           name="searchLocTime" value="${searchLocTime}"/>--%>
<%--                                </span>--%>
<%--                            </td>--%>
                            <td style="vertical-align:top;">
                                <button class="btn btn-mini btn-light" onclick="search();" title="检索"
                                        style="z-index: 1055">
                                    <i id="nav-search-icon" class="icon-search"></i>
                                </button>
                            </td>
                            <td style="vertical-align:top;">
                                <c:if test="${user.type == 1 and (empty user.channelArea.level or user.channelArea.level < 5) and fn:contains(butSet, 'toBatchAllot')}">
                                    <a class="btn btn-small btn-success" style="z-index: 1055"
                                       onclick="siMenu('z${menu.id}','lm${menu.pmenu.id}', '${menu.id}', '${menu.name}','${menu.url}')">
                                        号码批量分配
                                    </a>
                                </c:if>
                            </td>
                        </tr>
                    </table>
                    <!-- 检索  -->
                    <table id="table_report" class="table table-striped table-bordered table-hover">
                        <thead>
                        <tr>
                            <th>设备号</th>
                            <th>位置</th>
                            <th>定位时间</th>
                            <th>电量</th>
                            <th>区域</th>
                            <th>导入系统时间</th>
                            <th>首次登录系统时间</th>
                            <th>最后一次登录系统时间</th>
                            <th class="center">操作</th>
                        </tr>
                        </thead>
                        <tbody>
                        <!-- 开始循环 -->
                        <c:choose>
                            <c:when test="${not empty positions}">
                                <c:forEach items="${positions}" var="position">
                                    <tr style="text-align: center">
                                        <td>${position.id }</td>
                                        <td>${position.device.nowloc.address }</td>
                                        <td>
                                            <c:if test="${not empty position.device.nowloc.timestamp}">
                                                <jsp:setProperty name="dateValue" property="time"
                                                                 value="${position.device.nowloc.timestamp}000"/>
                                                <fmt:formatDate value="${dateValue}" pattern="yyyy-MM-dd HH:mm:ss"/>
                                            </c:if>
                                        </td>
                                        <td>${position.device.battery }</td>
                                        <td>${position.channelArea.name }</td>
                                        <td><fmt:formatDate value="${position.device.importTime }"
                                                            pattern="yyyy-MM-dd HH:mm:ss"/></td>
                                        <td><fmt:formatDate value="${position.device.firstLoginTime }"
                                                            pattern="yyyy-MM-dd HH:mm:ss"/></td>
                                        <td><fmt:formatDate value="${position.device.lastLoginTime }"
                                                            pattern="yyyy-MM-dd HH:mm:ss"/></td>
                                        <td style="width: 60px;">
                                            <div class='hidden-phone visible-desktop btn-group'>
                                                <c:if test="${not empty position.device.nowloc and fn:contains(butSet, 'check')}">
                                                    <a class='btn btn-mini btn-info' data-toggle="modal"
                                                       data-target="#myModal"
                                                       onclick="checkDevicePosition('${position.device.nowloc.imei}',
                                                               '${position.device.nowloc.lon}',
                                                               '${position.device.nowloc.lat}',
                                                               '${position.device.nowloc.address}',
                                                               '${position.device.nowloc.timestamp}')">
                                                        查看位置
                                                    </a>
                                                </c:if>
                                                <c:if test="${user.type == 1 and (empty user.channelArea.level or user.channelArea.level < 5) and fn:contains(butSet, 'allot')}">
                                                    <a class='btn btn-mini btn-info' title="编辑"
                                                       onclick="deviceAllot('${position.id}')">
                                                        号码分配
                                                    </a>
                                                </c:if>
                                            </div>
                                        </td>
                                    </tr>
                                </c:forEach>
                            </c:when>
                            <c:otherwise>
                                <tr class="main_info">
                                    <td colspan="10" class="center">没有相关数据</td>
                                </tr>
                            </c:otherwise>
                        </c:choose>
                        </tbody>
                    </table>
                    <div class="page-header position-relative">
                        <table style="width:100%;">
                            <tr>
                                <td style="vertical-align:top;">
                                    <div class="pagination"
                                         style="float: right;padding-top: 0px;margin-top: 0px;">${page.pageStr}</div>
                                </td>
                            </tr>
                        </table>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<div id="myModal" class="modal fade" role="dialog" aria-hidden="true" style="width: 700px; left: 35%;display: none">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">设备位置</h4>
            </div>
            <div class="modal-body">
                <div id="container"
                     class="amap-layers"
                     style="width:680px; height:470px;position: relative">
                </div>
            </div>
        </div>
    </div>
</div>
<!-- 返回顶部  -->
<a href="#" id="btn-scroll-up" class="btn btn-small btn-inverse">
    <i class="icon-double-angle-up icon-only"></i>
</a>
<!-- 引入 -->
<script type="text/javascript">window.jQuery || document.write("<script src='static/js/jquery-1.9.1.min.js'>\x3C/script>");</script>
<script src="static/js/bootstrap.min.js"></script>
<script src="static/js/ace-elements.min.js"></script>
<script src="static/js/ace.min.js"></script>
<script type="text/javascript">
    window._AMapSecurityConfig = {
        securityJsCode: "830498a4c3fe10c83685c7ee556e2554",
    };
</script>
<script type="text/javascript" src='http://webapi.amap.com/maps?v=2.0&key=8634cfb89333cba8c8b73b8cb4447b16'></script>
<script src="static/js/common/date-util.js"></script>

<script type="text/javascript" src="static/js/myjs/head.js"></script>
<script type="text/javascript">
    $(top.hangge());

    //检索
    function search() {
        top.jzts();
        $("#userForm").submit();
    }

    function deviceAllot(id) {
        top.jzts();
        var diag = new top.Dialog();
        diag.Drag = true;
        diag.Title = "号码分配";
        diag.URL = '<%=basePath%>position/toOneAllot?id=' + id;
        diag.Width = 500;
        diag.Height = 500;
        diag.CancelEvent = function () { //关闭事件
            if (diag.innerFrame.contentWindow.document.getElementById('zhongxin').style.display == 'none') {
                nextPage(${page.currentPage});
            }
            diag.close();
        };
        diag.show();
    }

    function deviceBatchAllot() {
        top.jzts();
        var diag = new top.Dialog();
        diag.Drag = true;
        diag.Title = "号码批量分配";
        diag.URL = '<%=basePath%>position/toBatchAllot';
        diag.Width = 500;
        diag.Height = 500;
        diag.CancelEvent = function () { //关闭事件
            if (diag.innerFrame.contentWindow.document.getElementById('zhongxin').style.display == 'none') {
                nextPage(${page.currentPage});
            }
            diag.close();
        };
        diag.show();
    }

    //创建地图
    var map = new AMap.Map('container', {
        resizeEnable: true
    });
    //创建样式
    var style = [{
        url: 'https://a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png',
        anchor: new AMap.Pixel(13, 34),
        size: new AMap.Size(26, 34)
    }];

    function checkDevicePosition(imei, lon, lat, address, timestamp) {
        map.clearMap();
        var citys = [{"lnglat": [lon, lat], "name": imei, "style": 0}];
        var marker = new AMap.Marker({
            map: map,
            position: [lon, lat],
            offset: new AMap.Pixel(-13, -34),
        });
        marker.on('mouseover', function (e) {
            //设置显示框的位置
            marker.setPosition([lon, lat]);
            //设置显示框的文字
            var time = get_date(timestamp);
            var contentText = "<div>";
            contentText += "<p>" + "设备号: " + imei + "</p>";
            contentText += "<p>" + "位置: " + address + "</p>";
            contentText += "<p>" + "定位时间: " + time + "</p>";
            contentText += "<p>" + "经纬度: " + lat + "," + lon + "</p>";
            contentText += "</div>";
            marker.setLabel({
                offset: new AMap.Pixel(20, -100),  //设置文本标注偏移量
                content: contentText
            });
        });
        map.setCenter([lon, lat]);
        map.setZoom(11);
    }
</script>
</body>
</html>
